<script setup>
import {computed, onMounted, ref} from 'vue'
import request from "@/utils/request";
import router from "@/router";
const tableData=ref();
const loadTransaction = ()=>{
  request.get('/order/user?orderStatus=2').then(res=>{
    console.log(res)
    tableData.value=res.data

  })


}
//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
//options

const paymentMethodOptions = ref()

//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{

  loadDictOptionsByCode(paymentMethodOptions,'bus_order_payment_method')

}
//formater-----------------------------------------------------------------
const paymentMethodFormatter = (val)=>{

  for(let index in paymentMethodOptions.value){
    if(paymentMethodOptions.value[index].value==val){
      val = paymentMethodOptions.value[index].label
      return val
    }
  }
  return val
}
onMounted(()=>{
  loadTransaction()
  loadAllDictOptions()
})
</script>

<template>
  <div style="width: 100%;border: 1px solid rgb(220, 223, 230)">
    <div style="padding: 20px 20px">

      <el-tabs  style="width: 100%">
        <el-tab-pane >
          <template #label>
          <span >
            <span>消费明细</span>
          </span>
          </template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="订单号"  />
            <el-table-column label="车辆名称" width="150">
              <template #default="scope">
                <el-button link type="primary" @click="router.push('/long_rent/detail?id='+scope.row.vehicleId)">{{scope.row.brandInfo}}</el-button>
              </template>

            </el-table-column>
            <el-table-column prop="rentalDuration" label="租赁天数"  />
            <el-table-column  label="开始日期">
              <template #default="scope">
                <span >{{formatDate(scope.row.startDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endDate" label="	结束日期">
              <template #default="scope">
                <span >{{formatDate(scope.row.endDate)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalCost" label="	支付金额" />
            <el-table-column  label="支付方式" >
              <template #default="scope">
                <span >{{paymentMethodFormatter(scope.row.paymentMethod)}}</span>
              </template>

            </el-table-column>
            <el-table-column prop="tradeNo" label="支付编号" />
            <el-table-column prop="paymentDate" label="支付时间" />


          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>



</template>

<style scoped>

</style>